// 从地址中拿到Id
const id = location.search.split('?id=')[1]


// =============================添加富文本编辑器=========================
const E = window.wangEditor
const editor = new E('#contentBox')
editor.config.zIndex = 1
editor.create()


// ===============================设置封面图片裁切区域===========================
// 取裁剪区域的 DOM 元素
let $image = $(".container img")
//配置选项
let options = {
  // 纵横比
  aspectRatio: 400 / 280,
  // 指定预览区域
  preview: ".preview",
}

const form = layui.form
const layer = layui.layer
//  ==============================获取文章分类列表填充到分类下拉框中=============================
axios.get('/my/article/cates').then(({ data: { data } }) => {
  const htmlStr = data.map(ele => {
    const { Id, name } = ele
    // 将option的value值设置为Id,因为后端需要根据Id来知道前端选择了哪个选项
    return `<option value="${Id}">${name}</option>`
  }).join('')
  // 为了不覆盖掉原本存在的“所有分类”选项所以使用append方法
  $('[name="cate_id"]').append(htmlStr)
  //刷新select选择框渲染
  // https://www.ilayuis.com/doc/modules/form.html#render
  form.render('select')


  /* 注：应当在分类下拉框中数据渲染完成后请求当前文章信息将cate_id填入下拉框，实现默认选中当前文章的分类，如果将下面的请求写到外面
  ，在网速较慢的情况下，会出现刚进入无法默认选中当前文章的分类，需要点击一下下拉框才会触发默认选中 */
  // =====================获取对应文章数据填充表单=========================
  axios.get('/my/article/' + id).then(({ data: { data } }) => {
    form.val("form", data)
    const { title, content, cover_img, cate_id } = data
    // 设置富文本编辑器的内容
    editor.txt.html(content)
    // 先更改图片链接再初始化裁切区域
    const imgSrc = `http://api-breakingnews-web.itheima.net` + cover_img
    $image.prop('src', imgSrc).cropper(options)
  })
})




